<template>
    <div class="panel-box-wrap">
        <div class="panel-box">
            <div class="panel-item">
                 <h2 class="title">所属机构</h2>
                 <div class="content">
                     <p>1949年，伴随着新中国的诞生，中国科学院成立。</p>
                     <p>作为国家在科学技术方面的最高学术机构和全国自然科学与高新技术的综合研究与发展中心</p>
                 </div>
                 <div class="content">
                    <p><span>地址：</span><span></span></p>
                    <p><span>邮政编码：</span><span></span></p>
                    <p><span>电话：</span><span></span></p>
                 </div>
            </div>

            <div class="panel-item">
                 <h2 class="title">热词</h2>
                 <div class="outline-block orange">
                     <div class="block" v-for="item in hotwords" :key="item.wordid">{{item.keyword}}</div>
                 </div>
            </div>
            <div class="panel-item">
                 <h2 class="title">合作团队</h2>
                 <div class="outline-block blue">
                     <div class="block" v-for="item in orgs" :key="item.id">{{item.NAME}}</div>
                 </div>
            </div>
            <div class="panel-item">
                 <h2 class="title">技术动态数据统计</h2>
                 <div class="content" style="height:225px;">
                     <div class="chart-wrap" ref="chart1"></div>
                 </div>
            </div>
            <div class="panel-item">
                 <h2 class="title">合作网络</h2>
                 <div class="content" style="height:230px;">
                     <div class="chart-wrap" ref="chart2"></div>
                 </div>
            </div>
        </div>
    </div>
</template>
<script>
import delegate from '../js/event.js';
import echarts from "echarts";
import data2 from "./guanxi.json";
import mixin from '../js/mixin.js';
export default {
    mixins:[mixin],
    data() {
        return {
           data2,
           authordetail:{},
           hotwords:[],
           orgs:[]
        }
    },
    mounted(){
        this._initMethod();
    },
    beforeDestroy(){
        // 移除事件
        delegate.$off('s-search',this._initSearch);
    },
    methods: {
        randomColor(){  
        　　var colorStr=Math.floor((0.1+Math.random())*0xFFFFFF).toString(16).toUpperCase();  
        　　return "#"+"000000".substring(0,6-colorStr)+colorStr;  
        },
        _initMethod() {
            delegate.$on('s-search',this._initSearch);
        },
        _initSearch(obj) {

        },
        _initChart(current){
             console.log(current,'panel');
             this._getDate(current);
             this.chart1();
            // this.chart2();
        },
         _getDate(current){
            if(!this.navCurrentId) return;
            this.api({
                    url: "authoranalyse/authorDetail",
                    method: "post",
                    data:`topicId=${this.navCurrentId}&authorId=${current.id}`
            }).then(data => {
                this._formatDetail(data);
                this._formatChart(data);
                console.log(data);
            })
        },
        _formatDetail(data){
            this.authordetail = data.authordetail;
            this.hotwords = [...data.hotwords];
            this.orgs = [...data.orgs];
        },
        _formatChart(data){
            // 处理 关系图
            let $this = this;
            this.nodes = [];
            this.edges = [];
            data.nodes.forEach(function(node) {
                var datanode = {
                    // x: parseInt(Math.random()*800),
                    // y: parseInt(Math.random()*800),
                    id: node.id + '',
                    name: node.label,
                    symbolSize: 25,
                    itemStyle: {
                        normal: {
                            color: $this.randomColor()
                        }
                    }
                };
                $this.nodes.push(datanode);
            });

            data.edges.forEach(function(edge) {
                var dataedge =  {
                    source: edge.sourceID + '',
                    target: edge.targetID + '',
                    lineStyle:{
                        width: 2
                    }
                };
                $this.edges.push(dataedge);
            });

            this.chart2()


        },
        chart1(){
            this.$nextTick(() => {
                let myChart = echarts.init(this.$refs.chart1);
                let xData = ['论文','专利','新闻动态','专家'];
                
                myChart.setOption({
                // legend:{}
                //     left:0,
                //     data:[
                //         {
                //             name:'云计算',
                //             icon: 'rect',
                //             textStyle: {
                //                 color: '#98caec'
                //             }
                //         },
                //         {
                //             name:'人脸识别',
                //             icon: 'rect',
                //             textStyle: {
                //                 color: '#98caec'
                //             }
                //         },
                //         {
                //             name:'图像识别',
                //             icon: 'rect',
                //             textStyle: {
                //                 color: '#98caec'
                //             }
                //         },
                //          {
                //             name:'音频识别',
                //             icon: 'rect',
                //             textStyle: {
                //                 color: '#98caec'
                //             }
                //         }

                //     ],
                // },
                color:['#dd8f04','#6459f0', '#00a3fa'],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: "0",
                    right: "2%",
                    top: "13%",
                    bottom: "1%",
                    containLabel: true
                },
                xAxis: {
                    type: "category",
                    data: xData,
                    interval: 10,
                    axisTick: {
                        show: false,
                        alignWithLabel: true
                    },
                    splitLine: {
                        show:false,
                        lineStyle: {
                            type: "dashed",
                            color: "#026b95" //分割线颜色
                        }
                    },
                    axisLine: {
                        show:true,
                        lineStyle: {
                            color: "#026b95", //坐标轴线颜色
                            width: 1
                        }
                    },
                    axisLabel: {
                        color: "#a1d6f8" //坐标轴名称颜色
                    }
                },
                yAxis: {
                    type: "value",
                    axisTick: {
                        show: false,
                        alignWithLabel: true
                    },
                    splitLine: {
                        show:true,
                        lineStyle: {
                            type: "dashed",
                            color: "#026b95" //分割线颜色
                        }
                    },
                    axisLine: {
                        show:true,
                        lineStyle: {
                            color: "#026b95", //坐标轴线颜色
                            width: 2,
                            
                        }
                    },
                    axisLabel: {
                         show:true,
                         color: "#a1d6f8" //坐标轴名称颜色
                    }
                },
                series: [
                    {  
                        name:'动态信息',
                        data: [50,100,600,780],
                        type: "bar",
                        barMaxWidth:'26',
                        itemStyle: {
                            normal: {
				                color: function(params) { 
				                     return new echarts.graphic.LinearGradient(0, 0, 0, 1,
			　　　　　　　　　　　　　     [
			　　　　　　　　　　　　　　       {offset: 0, color:'#159efc' },
										   {offset: 0.7, color:'#298dfb' },
			　　　　　　　　　　　　　　       {offset: 1, color: '#6e54f4'}
			　　　　　　　　　　　　　     ]);
				                }
				            },
                        },
                        label: {
			                normal: {
			                    show: true,
			                    color:'#00fcff',
                                position: 'top',
			                }
			            },
                        
                    },
                ]
                });
            });
        },
        chart2(){
             this.$nextTick(() => {
                let myChart = echarts.init(this.$refs.chart2);
                myChart.showLoading();
                myChart.hideLoading();
                myChart.clear();
                myChart.setOption(
                {
                    animationDurationUpdate: 1500,
                    animationEasingUpdate: "quinticInOut",
                    series: [
                    {
                        type: "graph",
                        layout: "force",
                        // progressiveThreshold: 700,
                        force : { //力引导图基本配置
                            //initLayout: ,//力引导的初始化布局，默认使用xy轴的标点
                            repulsion : 100,//节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
                            gravity : 0.03,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
                            edgeLength :80,//边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
                            layoutAnimation : true
                        //因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。                        
                        },
                        data: this.nodes,
                        draggable:true,
                        edges: this.edges,
                        symbolSize: 30,  
                        label: {
                        show:true,
                        emphasis: {
                            position: "inside",
                            show: true
                        }
                        },
                        roam: true,
                        focusNodeAdjacency: true,
                        lineStyle: {
                            color: 'source',
                            curveness: 0.3
                        },
                        emphasis: {
                            lineStyle: {
                                width: 10
                            }
                        }
                    }
                    ]
                },
                true
                );
            });    
        }
    },
}
</script>
<style lang="scss" scoped>
  .panel-box-wrap{
      padding-top: 60px;
      height: 100%;
      .panel-box{
          height: 100%;
          background-color: #091951;
          padding: 0 28px;
      }
      .panel-item{
          .title{
              font-size: 18px;
              color: #fff;
              text-align: left;
              padding-top: 20px;
              padding-bottom: 8px;
          }
          .content{
              p{
                  text-align: left;
                  color: #98caec;
                  font-size: 12px;
                  line-height: 1.8;

              }
          }
          .outline-block{
              display: grid;
              grid-template-columns: repeat(auto-fill, auto);
              justify-content: space-between;
              grid-row-gap: 13px;
              .block{
                  border-width: 1px;
                  border-style: solid;
                  height: 30px;
                  line-height: 30px;
                  border-radius: 3px;
                  text-align: center;
              }
              &.orange{
                  .block{
                       border-color: #f59f00;
                       color: #f59f00;
                  }
                 
              }
               &.blue{
                  .block{
                       border-color: #00a8ff;
                       color: #00a8ff;
                  }
                 
              }
              
              
          }
      }
  }
  .chart-wrap{
      width: 100%;
      height: 100%;
  }
</style>
